<script setup name="category-page">
import { ref, watchEffect } from 'vue';
import MyBanner from '../../../components/Mybanner/index.vue';
import MyAllClassify from '../../../components/MyAllClassify/index.vue';
import MyGoods from '../../../components/MyGoods/index.vue';
import MyBreadcrumb from '../../../components/MyBreadcrumb/index.vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
// const pagrId = ref(route.params.id);
// console.log(route.matched);

// 分类信息
store.dispatch('second/updateSecondList', { id: route.params.id });
const secondList = computed(() => store.state.second.secondList);
watchEffect(() => {
  store.dispatch('second/updateSecondList', { id: route.params.id });
});
// 轮播图
store.dispatch('classify/updateSlideshow', {
  distributionSite: 2,
});
const slideshow = computed(() => store.state.classify.slideshow);

// 面包屑
const breadcrumb = computed(() => {
  return route.matched
    .map((item) => item.name !== '分类' ?
      { ...item, breadcrumbName: item.name } :
      { ...item, breadcrumbName: secondList.value.name },
    );
});

</script>

<template>
  <div class="category-container">
    <!-- {{ secondList }} -->
    <!-- /面包屑 -->
    <my-breadcrumb :breadcrumb="breadcrumb"/>
    <!-- 轮播图 -->
    <my-banner :bannerList="slideshow"/>
    <!-- 全部分类 -->
    <my-all-classify :secondList="secondList"/>
    <!-- 全部分类物品 -->
    <my-goods :secondList="secondList"/>
  </div>
</template>

<style scope>
.category-container {
  width: 100%;
  min-width: 1240px;
  background-color: #f5f5f5;
}
</style>
